<template>
	<view class="bg-white flex flex-direction" style="height: 100vh; width: 100vw;">
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed" :style="style">
				<view class="action" @tap="BackPage">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content" :style="[{top:StatusBar + 'px'}]">
					<text style="font-size: 32rpx;">{{title}}</text>
				</view>
			</view>
		</view>
		<scroll-view class="flex flex-direction" scroll-y="true" style="height: 100%;width: 100%;">
			<view v-for="(followItem, index) in followInfo" :key="followItem.id" class="flex justify-between solid-bottom" style="padding: 24rpx 32rpx;">
				<followCell :type="type" :followItem="followItem" @changeFollowState="changeFollowState"></followCell>
			</view>
			<view v-if="!followInfo || followInfo.length<1" class="flex justify-center" style="margin-top: 40rpx; font-size: 40rpx;">
				还没有{{type=="fan"?"粉丝":"关注"}}呢
			</view>
			<!-- 上拉加载组件 -->
			<!-- <loadMore v-if="followInfo.length>10" :status="loadMoreStatus"></loadMore> -->
		</scroll-view>
	</view>
</template>

<script>
	import loadMore from '../../components/mine/loadMore.vue';
	import followCell from '../../components/mine/followCell.vue';
	export default {
		components: {
			loadMore,
			followCell
		},
		data() {
			return {
				type: 'fan',
				//请求参数
				userId: this.$store.getters.userid,

				followInfo: [],
				// loadMoreStatus: 0,
				// todo
				page: 0,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				bgColor: '',
			}
		},
		computed: {
			title() {
				return this.type == 'fan' ? '粉丝' : '关注'
			},
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		methods: {
			changeFollowState(followItem) {
				let that = this;
				if(this.type=='fan') {
					if(!followItem.isFollowMutually) {	//与粉丝没有互关，点击后关注粉丝unfollowOne
						this.$http.post("/ucenter/follow/followOne", 
						{
							userId: that.userId,
							followedId: followItem.userId
						}).then(res=>{
							let data =  res.data;
							if(data.success){
								this.$tip.success(data.message)
								followItem.isFollowMutually = !followItem.isFollowMutually
								console.log("followRes", res)
								console.log("followItem.isFollowMutually",followItem.isFollowMutually)
							}
						}).catch(err => {
							console.log(err);
						});
					}else {	//与粉丝互关，点击后取关粉丝
						this.$http.post("/ucenter/follow/unfollowOne",
						{
							userId: this.userId,
							followedId: followItem.userId
						}).then(res=>{
							let data =  res.data;
							if(data.success){
								this.$tip.success(data.message)
								followItem.isFollowMutually = !followItem.isFollowMutually
							}
						}).catch(err => {
							console.log(err);
						});
					}
				}else if(this.type=='followee'){
					// 关注页面触发点击事件，只可能取关
					this.$http.post("/ucenter/follow/unfollowOne",
					{
						userId: this.userId,
						followedId: followItem.followedUserId
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
							followItem.isFollowMutually = !followItem.isFollowMutually
							for (let i = 0; i < this.followInfo.length; i++){
							   if (this.followInfo[i].id==followItem.id){
							       this.followInfo.splice(i,1);
							   }
							}
						}
					}).catch(err => {
						console.log(err);
					});
				}
			},
			// loadMoreData() {
			// 	// 更改状态
			// 	this.loadMoreStatus = 1;
			// 	if(this.followInfo.length <= 40) {
			// 		this.followInfo = this.followInfo.concat(this.followInfo);
			// 		this.loadMoreStatus = 0;
			// 	}else {
			// 		this.loadMoreStatus = 2;
			// 	}
			// },
			BackPage() {
				// this.$Router.replace({
				// 	name: "indexFrontEnd",
				// 	params: {page: 'mine'}
				// })
				uni.navigateBack({
					delta:1
				})
			}
		},
		onLoad() {
			this.type = this.$Route.query.type;
			uni.setStorageSync("followType", this.type);
		},
		onUnload() {
			uni.removeStorageSync('followType');
		},
		onShow() {
			// this.type = this.$Route.query.type;
			this.type = uni.getStorageSync("followType");
			if(!this.type || this.type=='') this.type = 'fan';
			this.$http.post('/ucenter/follow/followInfo', 
			{
				"userId": this.userId,
				"type": this.type,
			}).then(res=>{
				console.log(res)
				let data = res.data;
				 if (data.success) {
					this.followInfo = data.result;
				}
			}).catch(err => {
				console.log(err);
			});
		}
	}
</script>

<style>
</style>
